<template>
  <view>
    <uni-nav-bar
      fixed="true"
      @click-left="back"
      left-text="返回"
      title="提现"
      left-icon="jiantou2"
      background-color="#FFFFFF"
      right-text="提现记录"
      @click-right="showdrawal"
    ></uni-nav-bar>
    <view :style="style"></view>
    <view class="grace-padding">
      <view class="withdrawal-amount">
        <view>提现金额</view>
        <view>可提阿币: 10000.00</view>
      </view>
      <view class="stylenice">
        <view class="money">
          <text>¥</text>
          <input type="number" v-model="money" class="input">
        </view>
        <view>预计到账人民币:&#x3000; 1849.00</view>
      </view>
      <view class="uni-textarea">
        <textarea
          v-model="remark"
          maxlength="50"
          placeholder-class="textarea"
          placeholder-style="color:#949393"
          placeholder="添加备注(50字以内)"
        />
      </view>
    </view>
    <view class="agree">
      <checkbox-group @change="hanldValue">
        <label class="agree_check">
          <checkbox color="#000000" :checked="checkbox" value="cb"/>同意
          <text>速付宝委托服务协议和速付宝提现客户服务协议</text>
        </label>
      </checkbox-group>
    </view>
    <button @tap="next" class="btn">下一步</button>
  </view>
</template>

<script>
import uniNavBar from "@/components/lmq-navbar/lmq-navbar";
export default {
  data() {
    return {
      option: "",
      remark: "",
      money: "",
      checkbox: false
    };
  },
  onLoad(option) {
    console.log(option);
    this.option = option;
  },
  methods: {
    hanldValue(e) {
      console.log(this.checkbox);
      this.checkbox = !this.checkbox;
      console.log(this.checkbox);
      console.log(e);

      console.log(e.detail.value);
    },
    showdrawal() {
      uni.switchTab({
        url: "/pages/TabBar/Home/index"
      });
    },
    back() {
      console.log(41);
    },
    next() {
      if (this.money == "") {
        uni.showToast({
          title: "请输入要转账的金额哦",
          duration: 2000,
          mask: true,
          icon: "none"
          // image:"../../../static/HM-search/delete.png"
        });
        return;
      }
      if (this.checkbox == false) {
        uni.showToast({
          title: "请同意我们协议!",
          duration: 2000,
          mask: true,
          icon: "none"
          // image:"../../../static/HM-search/delete.png"
        });
        return;
      }
      //验证成功后跳转
      var that = this;
      uni.navigateTo({
        url:
          "./to-confirm-withdrawal?ziduan=" +
          JSON.stringify(this.option) +
          "&money=" +
          this.money +
          "&remark=" +
          this.remark
      });
    }
  },
  computed: {
    style() {
      var systemInfo = uni.getSystemInfoSync();
      var systo = uni.getSystemInfo();
      // console.log(systemInfo.statusBarHeight);
      var statusBarHeight = systemInfo.statusBarHeight;
      return `height:${statusBarHeight + 60}px`;
    }
  },
  components: {
    uniNavBar
  }
};
</script>

<style scoped lang="scss">
.withdrawal-amount {
  display: flex;
  justify-content: space-between;
}
.grace-padding {
  width: 85%;
  padding: 7.5%;
}
.stylenice {
  margin: 65upx 0 51upx 0;
}
.money {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 50upx;
  // line-height: 55upx;
  border-bottom: 1px solid #949393;
  // padding-bottom: 20upx;
  // height: 60upx;
  text {
    height: 60upx;
    line-height: 60upx;
    font-size: 50upx;
  }
}
.input {
  // height: 70upx;
  // caret-color: red;
  height: 60upx;
  line-height: 60upx;
  // padding-bottom: 4px;
  font-size: 50upx;
}
// .textarea{
//   border: 1px solid red;
// }
.uni-textarea {
  border: 1px solid red;
}
.agree {
  width: 84%;
  margin: 0 auto;
  font-size: 20upx;

  .agree_check {
    display: flex;
    align-items: center;
    font-size: 20upx;
    text {
      color: #0089e1;
    }
  }
}

.btn {
  height: 66upx;
  color: white;
  background: #007bc3;
  width: 85%;
  margin: 0 auto;
  line-height: 66upx;
  margin-top: 37upx;
}
</style>